<template>
  <div class="mobile_top_con hidden sm:block">
    <header class="mobile_nav_con top fixed top-0 left-0 right-0 z-50">
      <div class="top relative flex h-full justify-center bg-slate-400 items-center">
        <h2>首页</h2>
        <span class="absolute right-4">
          <MenuToggle v-model="navToggle" />
        </span>
      </div>
      <div
        :class="
          $cn('nav_menu', {
            nav_menu_show: navToggle,
          })
        "
      >
        <MobileNav v-model:select="selectId" @itemClick="itemClick" :nav-list="navList" />
      </div>
    </header>
    <!-- 占位距离 -->
    <div class="top"></div>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
const props = defineProps({
  navList: {
    type: Array<any>,
    required: true,
  },
  initId: {
    type: String,
    default: "1-2",
  },
});
const itemClick = (item: any) => {
  //   console.log(item);
  navToggle.value = false;
};
const selectId = ref(props.initId);
const navToggle = ref(false);
watch(() => props.initId,(nv) => {
  selectId.value = nv
})
</script>
<style lang="scss" scoped>
$hTop: 50px;
.mobile_top_con {
  .top {
    height: $hTop;
  }

  .nav_menu {
    transform: translateX(-100vw);
    transition: transform 0.5s ease;
    height: calc(100vh - $hTop);
    overflow-y: scroll;
    background-color: rgba(179, 177, 177, 1);
    &.nav_menu_show {
      transform: translateX(0);
    }
  }
}
</style>
